<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册页面</title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
				box-sizing: border-box;
			}

			.register {
				width: 100%;
				height: 100%;
				background: #999999;
				min-height: 100vh;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.register1 {
				width: 400px;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.img {
				text-align: center;
				margin-bottom: 20px;
			}

			.input-row {
				width: 100%;
				display: flex;
				align-items: center;
				margin-bottom: 20px;
			}

			.input-label {
				color: white;
				font-size: 18px;
				width: 80px;
				text-align: right;
				margin-right: 10px;
			}

			.input-field {
				flex: 1;
			}

			.register-sjh,
			.register-name {
				width: 100%;
				height: 50px;
				background: #CCCCCC;
				border: 0px;
				padding: 3px 22px;
				font-size: 18px;
			}

			.verification-group {
				display: flex;
				align-items: center;
				width: 100%;
			}

			.register-yzm {
				width: 180px;
				height: 50px;
				background: #CCCCCC;
				border: 0px;
				padding: 3px 22px;
				font-size: 18px;
				margin-right: 10px;
			}

			.verification-img {
				margin-right: 10px;
			}

			.change-code {
				font-size: 14px;
				color: white;
			}

			.btn {
				width: 100%;
				height: 40px;
				background: #484B4E;
				color: white;
				font-size: 18px;
				border: 0px;
				cursor: pointer;
			}

			.img1 {
				display: flex;
				width: 100%;
				margin: 20px auto 0;
				justify-content: space-between;
			}

			.img1>span {
				padding-left: 85px;
			}

			.img1>span>a {
				color: white;
			}

			.agreement {
				width: 100%;
				margin: 10px 0 20px;
				text-align: left;
				padding-left: 90px;
			}

			.agreement span {
				color: royalblue;
			}

			.error-message {
				color: red;
				font-size: 14px;
				margin-top: -15px;
				margin-bottom: 10px;
				width: 100%;
				padding-left: 90px;
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="register">
			<div class="register1">
				<div class="img"><img src="img/login2.png" alt="" /></div>

				<div class="input-row">
					<span class="input-label">手机号</span>
					<div class="input-field">
						<input id="phone" class="register-sjh" type="text" placeholder="请输入手机号" />
					</div>
				</div>

				<div class="input-row">
					<span class="input-label">验证码</span>
					<div class="input-field">
						<div class="verification-group">
							<input id="verificationCode" class="register-yzm" type="text" placeholder="输入验证码" />
							<img class="verification-img" src="img/yzm.png" alt="验证码" />
							<span class="change-code">看不清，换一张</span>
						</div>
					</div>
				</div>

				<div class="input-row">
					<span class="input-label">创建密码</span>
					<div class="input-field">
						<input id="password" class="register-name" type="password" placeholder="6-20位字符组成,区分大小写" />
					</div>
				</div>

				<div class="input-row">
					<span class="input-label">确认密码</span>
					<div class="input-field">
						<input id="confirmPassword" class="register-name" type="password" placeholder="确认密码" />
					</div>
				</div>

				<div class="agreement">
					<input id="agree" type="checkbox" />同意<span>良仓注册条款</span>
				</div>

				<div id="errorMsg" class="error-message"></div>

				<div class="input-row">
					<div class="input-field" style="margin-left: 90px;">
						<button id="registerBtn" class="btn">立即注册</button>
					</div>
				</div>

				<div class="img1">
					<span>
						<img src="img/qq.png" alt="" />
						<img src="img/wb.png" alt="" />
						<img src="img/dou.png" alt="" />
						<img src="img/hua.png" alt="" />
					</span>
					<span><a href="login.html">登录良仓</a></span>
				</div>
			</div>
		</div>
		<script src="js/ajax2.js"></script>
		<script>
			document.getElementById('registerBtn').addEventListener('click', function() {

				let phone = document.getElementById('phone').value.trim();
				let verificationCode = document.getElementById('verificationCode').value.trim();
				let password = document.getElementById('password').value.trim();
				let confirmPassword = document.getElementById('confirmPassword').value.trim();
				let agree = document.getElementById('agree').checked;
				let errorMsg = document.getElementById('errorMsg');

				if (!phone) {
					showError(errorMsg, '请输入手机号');
					return;
				}
				if (!verificationCode) {
					showError(errorMsg, '请输入验证码');
					return;
				}
				if (!password) {
					showError(errorMsg, '请输入密码');
					return;
				}
				if (password.length < 6 || password.length > 20) {
					showError(errorMsg, '密码长度应为6-20位');
					return;
				}
				if (password !== confirmPassword) {
					showError(errorMsg, '两次输入的密码不一致');
					return;
				}
				if (!agree) {
					showError(errorMsg, '请同意注册条款');
					return;
				}

				hideError(errorMsg);

				const params =`username=${encodeURIComponent(phone)}&password=${encodeURIComponent(password)}&status=register`;

				ajax({
					method: 'POST',
					url: 'http://8.134.172.28:3008/api_user',
					params: params,
					type: 'json',
					callback: function(response) {
						if (response.code === 0) {
							alert('注册成功！用户名: ' + response.username);

							window.location.href = 'login.html';
						} else {
							showError(errorMsg, response.message || '注册失败');
						}
					},
					fail: function(error) {
						showError(errorMsg, '请求失败: ' + error);
					}
				});
			});

			function showError(element, message) {
				element.textContent = message;
				element.style.display = 'block';
			}

			function hideError(element) {
				element.textContent = '';
				element.style.display = 'none';
			}
			
		</script>
	</body>
</html>